<template>
  <view class="my-purchanse page--column">
    <van-tabs :active="active" @change="onChange" sticky>
      <van-tab :name="-1" title="待支付"></van-tab>
      <van-tab :name="0" title="已支付"></van-tab>
      <van-tab :name="1" title="审核中"></van-tab>
      <van-tab :name="2" title="待出库"></van-tab>
      <van-tab :name="3" title="部分出库"></van-tab>
      <van-tab :name="4" title="已出库"></van-tab>
    </van-tabs>
    <view class="col-main p-main">
      <list-page :config="page.config" :form="page.form" ref="page">
        <template v-slot="{ listData }">
          <view class="p-item" :key="key" v-for="(item, key) in listData">
            <view class="item-title">
              <view class="i-sn">
                订单编号：
                {{ item.sn }}
              </view>
              <view class="i-status">{{
                item.status | purchanseStatusFilter
              }}</view>
            </view>
            <view class="purchanse-info" @tap="
                nav(`/subpackage/order/pages/purchanse/_id?id=${item.id}`)
              ">
              <view class="p-i-item">
                <text>商品数量</text>
                <text>{{ item.goodsItemsQuantity }}件</text>
              </view>
              <view class="p-i-item" v-if="['3', '4'].includes(page.form.query.status)">
                <text>待出库数量</text>
                <text>{{ item.goodsItemsQuantityNoStockOut }}件</text>
              </view>
              <view class="p-i-item" v-if="page.form.query.status === '5'">
                <text>出库数量</text>
                <div>
                  <text v-if="item.status === 4" style="color: #ff0101">(部分出库)</text>
                  {{
                    item.goodsItemsQuantity - item.goodsItemsQuantityNoStockOut
                  }}件
                </div>
              </view>
              <view class="p-i-item">
                <text>订单金额</text>
                <text>{{
                    item.isNewDistributor === 1
                      ? item.amount + item.goodsItemsQuantity * 35
                      : item.amount
                  }}元</text>
              </view>
              <view class="p-i-item">
                <text>订单时间</text>
                <text>{{ item.createTime }}</text>
              </view>
              <view class="p-i-item">
                <text>订单类型</text>
                <text>{{ item.type | purchanseTypeFilter }}</text>
              </view>
            </view>
            <view class="button">
              <view class="pay" v-if="page.form.query.status === '-1'">
                <view class="pay--time">
                  <view>剩余时间:</view>
                  <view class="minute">{{
                    now | minute($dayjs(item.paymentStartTime))
                  }}</view>
                  <view>:</view>
                  <view class="second">{{
                    now | second($dayjs(item.paymentStartTime))
                  }}</view>
                </view>
                <view class="pay--cancel" @tap="cancelOrder(item.id)">取消订单</view>
                <view class="pay--go" @tap="goPay(item.sn)">去付款</view>
              </view>
              <view v-else class="b-item" @tap="
                  nav(`/subpackage/order/pages/purchanse/_id?id=${item.id}`)
                ">订单详情</view>
            </view>
          </view>
        </template>
      </list-page>
    </view>
  </view>
</template>

<script>
  import listPage from "@/components/list-page";
  import {
    model
  } from "@/model";
  import {
    mapState
  } from "vuex";
  const {
    PurchanseCart,
    PageBo
  } = model.collection;
  export default {
    components: {
      listPage,
    },
    data() {
      return {
        page: {
          config: {
            entity: "Purchanse",
            action: "page",
            enablePull: true,
          },
          form: {
            query: {
              status: "-1",
              type: "1,2",
            },
          },
        },
        active: -1,
      };
    },
    computed: {
      ...mapState(["now"]),
    },
    filters: {
      minute(now, paymentStartTime) {
        let expirationTime = ~~((paymentStartTime + 1800000 - now) / 1000);
        return `0${Math.max(~~((expirationTime / 60) % 60), 0)}`.slice(-2);
      },
      second(now, paymentStartTime) {
        let expirationTime = ~~((paymentStartTime + 1800000 - now) / 1000);
        return `0${Math.max(expirationTime % 60, 0)}`.slice(-2);
      },
    },
    methods: {
      onChange(e) {
        const {
          name
        } = e.detail;
        if (name === -1) {
          this.page.form.query.status = "-1";
          this.page.form.query.type = "1,2";
        }
        if (name === 0) {
          this.page.form.query.status = "0";
          this.page.form.query.type = "1,2";
        }
        if (name === 1) {
          this.page.form.query.status = "1";
          this.page.form.query.type = "";
        }
        if (name === 2) {
          this.page.form.query.status = "3";
          this.page.form.query.type = "1,2,5,6,7";
        }
        if (name === 3) {
          this.page.form.query.status = "4";
          this.page.form.query.type = "1,2,5,6,7";
        }
        if (name === 4) {
          this.page.form.query.status = "5";
          this.page.form.query.type = "";
        }
      },
      cancelOrder(id) {
        uni.showModal({
          cancelColor: "#999999",
          confirmColor: "#DB187C",
          content: "是否取消订单?",
          success: async (res) => {
            if (res.confirm) {
              const res = await PurchanseCart.sendApi("cancel", {
                params: {
                  id,
                },
                data: {},
              });
              if (res.code !== 2000) {
                return;
              }
              this.$refs.page.fresh();
              this.toast("订单取消成功");
            }
          },
        });
      },
      goPay(sn) {
        this.nav(`/subpackage/order/pages/purchanse/pay?sn=${sn}`);
      },
    },
  };
</script>

<style lang="less">
  page {
    overflow: hidden;
    background-color: #f7f7f7;

    .my-purchanse {
      .p-main {
        width: 100%;
        height: 100vh;

        .p-item {
          width: 660rpx;
          margin: 30rpx 25rpx 0 25rpx;
          padding: 20rpx;
          background: #ffffff;
          border-radius: 20rpx;

          .item-title {
            height: 40rpx;
            margin-bottom: 70rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;

            .i-sn {
              width: 500rpx;
              word-break: break-all;
              border-left: 8rpx solid #d61e85;
              padding-left: 10rpx;
              font-weight: bold;
            }

            .i-status {
              color: #db187c;
            }
          }

          .purchanse-info {
            margin-bottom: 15rpx;
            border-bottom: 1rpx solid #f4f4f4;

            .p-i-item {
              height: 50rpx;
              margin-bottom: 35rpx;
              display: flex;
              justify-content: space-between;
              font-size: 30rpx;
              color: #666666;
            }
          }

          .button {
            position: relative;
            height: 55rpx;
            display: flex;
            justify-content: flex-end;

            >.pay .pay--cancel,
            >.pay .pay--go,
            .b-item {
              width: 150rpx;
              height: 50rpx;
              margin-left: 15rpx;
              background: #ffffff;
              border-radius: 30rpx;
              font-size: 30rpx;
              text-align: center;
              line-height: 50rpx;
              border: 1rpx solid #db187c;
              color: #db187c;
            }

            >.pay {
              display: flex;

              .pay--cancel {
                border: 1rpx solid #999;
                color: #666;
              }

              .pay--time {
                position: absolute;
                left: 0;
                display: flex;
                align-items: center;
                height: 100%;
                font-size: 26rpx;
                font-weight: 400;
                color: #f00;

                .minute {
                  margin: 0 12rpx;
                }

                .second {
                  margin-left: 12rpx;
                }

                .minute,
                .second {
                  width: 40rpx;
                  height: 40rpx;
                  font-size: 30rpx;
                  font-weight: bold;
                  color: #f00;
                  background: #ffe1e1;
                  border-radius: 5rpx;
                  line-height: 40rpx;
                  border-radius: 5rpx;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>